<template>
	<el-dialog v-model="visible" :title="dataForm.titleval" :close-on-click-modal="false" draggable width="80%">
		<el-button type="primary" class="btnbutton" style="margin-bottom: 20px" @click="handlePrintJs">打印</el-button>
		<el-card id="printTest">
			<el-form ref="patientFormRef" :model="patientForm">
				<div class="divtext" style="width: 100%; height: 30px; float: left; padding-left: 10px; font-weight: bold">患者信息</div>
				<div class="divhr" style="width: 99%; border-bottom: 1px solid #409eff; height: 0.5px; float: left"></div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="patientName" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="姓名：">
						<span class="spantext" style="width: 100%; height: 30px; float: left">{{ patientForm.patientName }}</span>
					</el-form-item>
					<el-form-item prop="deptName" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="部门：">
						<span class="spantext" style="width: 100%; height: 30px; float: left">{{ patientForm.deptName }}</span>
					</el-form-item>
					<el-form-item prop="nurseName" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="主管护士：">
						<span class="spantext" style="width: 100%; height: 30px; float: left">{{ patientForm.nurseName }}</span>
					</el-form-item>
				</div>
				<div class="divline" style="width: 96%; height: 30px; float: left; margin-top: 20px">
					<el-form-item prop="bedName" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="床位信息：">
						<span class="spantext" style="width: 100%; height: 30px; float: left">{{ patientForm.bedName }}</span>
					</el-form-item>
					<el-form-item prop="createTime" class="divlineleft" style="width: 30%; float: left; height: 30px; padding-left: 10px" label="入院时间：">
						<span class="spantext" style="width: 100%; height: 30px; float: left">{{ patientForm.createTime }}</span>
					</el-form-item>
				</div>
				<div class="divtextend" style="width: 100%; height: 30px; float: left; padding-left: 10px; font-weight: bold; margin-top: 30px">
					入院诊断记录
				</div>
				<div class="divhr" style="width: 99%; border-bottom: 1px solid #409eff; height: 0.5px; float: left"></div>
				<div class="readiv" style="width: 90%; height: 100%; float: left; min-height: 100px; margin-top: 20px">
					<p v-html="patientForm.houseDia"></p>
				</div>
			</el-form>
		</el-card>
	</el-dialog>
</template>

<script setup lang="ts" name="SysPostIndex">
import { useCrud } from '@/hooks'
import { reactive, ref, getCurrentInstance } from 'vue'
import { IHooksOptions } from '@/hooks/interface'
import printJs from 'print-js'
const visible = ref(false)
let proxy = getCurrentInstance()
const state: IHooksOptions = reactive({
	queryForm: {
		drugList: [],
		projectList: []
	}
})
const patientForm = reactive({
	id: '',
	patientName: '', //姓名
	houseDia: '', //入院诊断
	deptName: '', //部门名称
	nurseName: '', //主管护士
	bedName: '', //床位信息
	createTime: '', //入院时间
	orgId: '' //组织id,
})

const dataForm = reactive({
	titleval: '入院登记详情',
	remark: ''
})
const handlePrintJs = () => {
	printJs({
		printable: 'printTest',
		type: 'html',
		css: ['//unpkg.com/element-plus/dist/index.css'],
		scanStyles: false
	})
}
const init = (row: any) => {
	patientForm.patientName = row.patientName
	patientForm.houseDia = row.houseDia
	patientForm.deptName = row.deptName
	patientForm.nurseName = row.nurseName
	patientForm.bedName = row.bedName
	patientForm.createTime = row.createTime
	visible.value = true
}
const { getDataList, selectionChangeHandle, sizeChangeHandle, currentChangeHandle, deleteBatchHandle } = useCrud(state)

defineExpose({
	init
})
</script>

<style lang="scss" scoped>
.divline {
}
.divline-btn {
	width: 96%;
	height: 30px;
	float: left;
	margin-top: 50px;
	text-align: center;
}
.divline-button {
	width: 96%;
	height: 30px;
	margin: 0px auto;
}
.divlinespac {
	width: 96%;
	height: 30px;
	float: left;
}
.divlineleft {
}
.divlinecol {
	width: 71%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divlinecolt {
	width: 71%;
	float: left;
	height: 30px;
	padding-left: 10px;
}
.divtext {
}
.divtextend {
}
.divtexttb {
	width: 100%;
	height: 30px;
	float: left;
	padding-left: 10px;
	font-weight: bold;
	margin-top: 50px;
}
.divhr {
	width: 95%;
	height: 0.5px;
	background-color: #409eff;
	float: left;
}
.divline-button-left {
	width: 100px;
	height: 30px;
	margin-left: 40%;
	float: left;
	:deep(.el-button--primary) {
		margin-top: 10px;
		width: 100px;
		height: 30px;
		font-size: 13px;
	}
}
.divline-button-right {
	width: 100px;
	height: 30px;
	float: left;
	margin-left: 20px;
	:deep(.el-button--primary) {
		margin-top: 10px;
		background-color: red;
		width: 100px;
		height: 30px;
		font-size: 13px;
		border: 0px;
	}
}
.spantext {
}
.tb {
	border-collapse: collapse;
}
.tb td {
	height: 25px;
}
.tb td,
.tb th {
	border: 1px solid #aaa;
}
.readiv {
}
</style>